<template>
  <div class="search">
    <project-nav-bar></project-nav-bar>
    <search-top
      @click.native="searchTopClcik"
      @historyClick="historyClick"
    ></search-top>
    <search-history
      v-if="searchValue.length === 0 && currentStr.length !== 0 && aa"
      @searchItemClick="searchItemClick"
      :hotKeywordList="historyData"
    >
      <div slot="title">历史记录</div>
      <div slot="icons" @click="delClick">
        <img src="@/assets/img/search/index.png" alt="" />
      </div>
    </search-history>
    <search-history
      v-if="searchValue.length === 0 && currentStr.length !== 0 && aa"
      @searchItemClick="searchItemClick"
      :hotKeywordList="hotKeywordList"
    >
      <div slot="title">热门搜索</div>
    </search-history>
    <search-main
      @searchClick="searchClick"
      v-else-if="searchValue.length !== 0 && currentClick == false"
      :searchValue="searchValue"
    ></search-main>
    <div
      class="search-content"
      v-else-if="aa == false || keywordsValue.length !== 0"
    >
      <goods-tab-control></goods-tab-control>
      <goods-list :goodsList="keywordsValue"></goods-list>
    </div>
    <goods-list v-else-if="currentStr.length == 0"></goods-list>
  </div>
</template>

<script>
import {
  getHelp,
  getAction,
  getHistory,
  getAddhistoryaction,
  getClearHistory,
} from "@/network/search";
import ProjectNavBar from "./children/ProjectNavBar";
import SearchTop from "./children/SearchTop";
import SearchHistory from "./children/SearchHistory";
import SearchMain from "./children/SearchMain";
import GoodsTabControl from "./children/GoodsTabControl";
import GoodsList from "./children/GoodsList";
export default {
  components: {
    ProjectNavBar,
    SearchTop,
    SearchHistory,
    SearchMain,
    GoodsTabControl,
    GoodsList,
  },
  data() {
    return {
      hotKeywordList: [], // 热门数据
      searchValue: [],
      keywordsValue: [],
      currentClick: true,
      currentClicks: true,
      currentStr: ["1"], // 最后一个搜索判断
      searchMains: {}, // 总数据
      historyData: [],
      aa: true,  // 还是判断 绕晕了 弄好了
    };
  },
  created() {
    this.getActions();
  },
  methods: {
    // 点击历史记录跳转
    searchItemClick(item) {
      console.log(item.keyword);
      this.aa = false;
      console.log(this.aa);
      this.searchClick(item);
    },
    // 删除历史记录
    delClick() {
      console.log("2");
      let openId = localStorage.getItem("openId");
      const datas = {
        openId,
      };
      getClearHistory(datas).then((res) => {
        console.log(res, "删除成功");
        this.getActions();
      });
    },
    // 内容点击事件
    searchClick(item) {
      // console.log(item)
      let keyword = item.name || item.keyword;
      //  this.currentClick = false;
      console.log("哈哈");
      let openId = localStorage.getItem("openId");
      const datas = {
        keyword,
        order: "desc",
      };
      getHistory(datas).then((res) => {
        this.keywordsValue = res.keywords;
        this.currentClick = true;
        console.log(this.currentClick);
        console.log(this.keywordsValue);
      });
      const datass = {
        keyword,
        openId,
      };
      // 再次发送一次请求 防止用户退回去看不到搜索记录
      this.getActions();
      getAddhistoryaction(datass).then((res) => {
        console.log(res); // success
        console.log(this.searchMains); // 自动记录了
        this.historyData = this.searchMains.historyData;
        console.log(this.historyData);
      });
    },
    // 搜索框input事件
    historyClick(val) {
      console.log(val, "ahah1");
      this.currentClick = false;
      // console.log(this.keywordsValue, '哈哈哈2') // 不知道为啥有值了
      this.keywordsValue = [];
      // 监听输入的数据
      this.searchValue = val.searchValue;
      let arr = this.searchValue.filter((item) => {
        return item.name.includes(val.val);
      });
      //  this.currentStr = this.currentStr.concat(['12'])
      this.currentStr = arr.length == 0 ? [] : arr;
      if (!val.val) {
        this.currentStr = arr.length == 0 ? ["1"] : arr;
      }
      console.log("s", this.currentStr);
    },
    // 搜索框点击事件
    searchTopClcik() {
      this.currentClick = false;
      this.aa = true 
      console.log(this.currentClick);
    },
    getActions() {
      let openId = localStorage.getItem("openId");
      const datas = {
        openId,
      };
      getAction(datas).then((res) => {
        console.log(res);
        this.searchMains = res;
        this.hotKeywordList = res.hotKeywordList; // 热门搜索
        this.historyData = res.historyData; // 历史记录
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #f4f4f4;
}
</style>